<template>
    <div>
        <table class="table" border="1">
            <thead style="background-color: aqua;">
                <tr>
                    <th>用户借款编号</th>
                    <th>借款用户账号</th>
                    <th>借款款项名称</th>
                    <th>借款金额</th>
                    <th>剩余还款本金</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in info" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.username}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.money}}</td>
                    <td>{{item.out}}</td>
                </tr>
            </tbody>
            姓名:{{long.name}}
            年龄:{{long.age}}
        </table>


    
<h1> {{ name }}</h1>
      
    </div>
</template>

<script setup lang="ts">
import { ref} from "vue"

var name = '双向数据绑定演示'

const long = ref(
{
    name:'张三',
    age:18,
},
)

const info = ref([
{
    id:1,
    username:'zhangsan',
    name:'八维助学金',
    money:400,
    out:0,
},
{
    id:2,
    username:'zhangsan',
    name:'八维助学金',
    money:10000,
    out:10000,
}
])

</script>